<template>
    <div class="main-card">
        <div class="page-header" style="justify-content: center;">
            <h2>校园公告</h2>
        </div>
        <div class="grid-layout" style="grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));">
            <div v-for="item in announcements" :key="item.id" class="base-card announcement-card">
                <div class="p-4">
                    <div class="announcement-title" @click="toggle(item.id)">
                        <span>{{ item.title }}</span>
                        <span class="arrow" :class="{ open: openIds.includes(item.id) }">&#9660;</span>
                    </div>
                    <div v-if="openIds.includes(item.id)" class="announcement-detail">
                        <div class="announcement-date text-small text-secondary">发布时间：{{ item.date }}</div>
                        <div class="announcement-content text-secondary">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import '@/assets/styles/common.css'

const openIds = ref([])
const announcements = ref([
    {
        id: 1,
        title: '学校通告：假期安排调整',
        date: '2023-10-01',
        content: '因特定原因，学校决定对即将到来的假期安排进行调整，请全体师生关注。'
    },
    {
        id: 2,
        title: '通知：图书馆延长开放时间',
        date: '2023-10-02',
        content: '为了方便学生学习，图书馆将在本周延长开放时间至晚上九点。'
    },
    {
        id: 3,
        title: '关于校园安全的温馨提示',
        date: '2023-10-05',
        content: '请同学们注意校园安全，遵守校规校纪，遇到问题及时联系老师或保卫处。'
    }
])

function toggle(id) {
    const idx = openIds.value.indexOf(id)
    if (idx > -1) {
        openIds.value.splice(idx, 1)
    } else {
        openIds.value.push(id)
    }
}
</script>

<style scoped>
.announcement-card {
    min-height: 120px;
    cursor: pointer;
}

.announcement-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.15em;
    font-weight: bold;
    color: #2563eb;
}

.arrow {
    margin-left: 10px;
    font-size: 1.1em;
    transition: transform 0.2s;
}

.arrow.open {
    transform: rotate(180deg);
}

.announcement-detail {
    margin-top: 12px;
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}

.announcement-date {
    margin-bottom: 6px;
}

.announcement-content {
    line-height: 1.7;
}
</style>